<template>
  <div class="sonson">
    <h1>孙组件</h1>
    <h2>爷爷的钱：{{ money }}</h2>
    <button @click="changeMoneyFn(100)">点击花钱</button>
  </div>
</template>

<script>
/* 
  目标：掌握使用provide函数和inject函数完成后代组件数据通讯

  provide 函数：
    作用：
      provide函数，把数据或函数提供给所有子孙后代组件
    语法：
      provide('key', value)
  inject 函数：
    作用：
      inject 函数，根据键名称获取到 provide 定义的数据。
    语法：
      const value = inject('key')
*/
import { inject } from 'vue'
export default {
  name: 'SonSon',
  setup() {
    // inject 函数，根据键名称获取到 provide 定义的数据。
    // 语法：const value = inject('key')
    const money = inject('money') // 获取数据
    const changeMoneyFn = inject('changeMoneyFn') // 获取函数
    return { money, changeMoneyFn } // 在模板中使用
  },
}
</script>

<style scoped>
.sonson {
  background-color: deeppink;
  padding: 20px;
}
</style>
